<template>
  <div class="teacherSubject">
     <div id="container" v-show="!loader.show">
       <div class="header_group">
              <h6>选择教学课程</h6>
              <p>选择课程然后选择年级</p>
       </div>
       <ul class="info1">
             <li @click="show.subject1_prop=true;">
                 <label>擅长科目一</label>
                 <input type="text" v-model="subject1" placeholder="请选择" readonly/>
             </li>
        </ul>
       <p class="title">可授课年级（可多选）</p>
       <ul class="grade">
            <li v-for="grade in subject1_grade_arr" :class="{'active':studentLevel1.indexOf(grade)>-1}"  @click="toggle1(grade)">
                 {{grade}}
            </li>
       </ul>
       <ul class="info1">
             <li @click="show.subject2_prop=true;">
                 <label>擅长科目二</label>
                 <input type="text" v-model="subject2" placeholder="请选择" readonly/>
             </li>
        </ul>
       <p class="title">可授课年级（可多选）</p>
       <ul class="grade">
            <li v-for="grade in subject2_grade_arr" :class="{'active':studentLevel2.indexOf(grade)>-1}"  @click="toggle2(grade)">
                 {{grade}}
            </li>
       </ul>
       <p class="commit" @click="commit();">保存</p>
       <!--科目一选项卡-->
       <div class="prop" v-show="show.subject1_prop" @click="closeProp('subject1_prop');">
           <ul class="tab">
                <li v-for="subject in subjectArr" :class="{'active':subject==subject1}">
                     <label>{{subject}}</label>
                     <input type="radio" name="subject" v-model="subject1" :value="subject"/>
                </li>
           </ul>
       </div>
       <!--科目二选项卡-->
       <div class="prop" v-show="show.subject2_prop" @click="closeProp('subject2_prop');">
           <ul class="tab">
                <li v-for="subject in subjectArr" :class="{'active':subject==subject2}">
                     <label>{{subject}}</label>
                     <input type="radio" name="subject" v-model="subject2" :value="subject"/>
                </li>
           </ul>
       </div>
     </div>
     <!--公共提示-->
     <tip :tip="tip" :loading="loading" :loader="loader"></tip>
  </div>
</template>

<script>
import tip from './tip'
export default {
    name:'teachingSubject',
    data(){
        return{
            show:{
               subject1_prop:false,
               subject2_prop:false
            },
            subject1:'',
            subject2:'',
            studentLevel1:[],
            studentLevel2:[],
            userId:'',
            tip:{
              status:false,
              msg:''
            },
            loading:{
              status:false,
              msg:''
            },
            loader:{
              show:true
            },
            gradeArr1:['一年级','二年级','三年级','四年级','五年级','六年级','七年级','八年级','九年级','高一','高二','高三'],
            gradeArr2:['七年级','八年级','九年级','高一','高二','高三'],
            subjectArr:['语文','数学','英语','物理','化学','政治','历史','地理','生物'],
            subject1_grade_arr:[],
            subject2_grade_arr:[],
            url:''
        }
    },
    components:{
      tip
    },
    mounted:function(){
        this.userId = this.$route.query.userId;
        this.getInitialData();
    },
    watch:{
      'subject1':function(newValue,oldValue){
        if((this.subject1=='语文')||(this.subject1=='数学')||(this.subject1=='英语')){
           this.subject1_grade_arr=this.gradeArr1;
        }else{
          this.subject1_grade_arr=this.gradeArr2;
        }
        if(oldValue){
          this.studentLevel1.splice(0,this.studentLevel1.length);
        }
        
      },
      'subject2':function(newValue,oldValue){
        if((this.subject2=='语文')||(this.subject2=='数学')||(this.subject2=='英语')){
           this.subject2_grade_arr=this.gradeArr1;
        }else{
          this.subject2_grade_arr=this.gradeArr2;
        }
        if(oldValue){
          this.studentLevel2.splice(0,this.studentLevel2.length);
        }
      }
    },
    methods:{
        getInitialData(){
            let _this=this;
            _this.$http.get("api/teacherController.do?id="+_this.userId+"&getTeacherSubjectInfoById=null").then((data)=>{
               console.log(data);
               if(data.body){
                   _this.subject1=data.body.subject1;
                   _this.studentLevel1=data.body.studentLevel1.split("|");
                   _this.subject2=data.body.subject2;
                   _this.studentLevel2=data.body.studentLevel2.split("|");
                   _this.url="/api/teacherController.do?updateTeacherSubjectInfo";
               }else{
                   _this.url="/api/teacherController.do?saveTeacherSubjectInfo";
               }
               _this.loader.show=false;
            })
        },
        closeProp(tab){
           let _this=this;
           setTimeout(function(){
            if(tab=='subject1_prop'){
               _this.show['subject1_prop']=false;
            }else if(tab=='subject2_prop'){
               _this.show['subject2_prop']=false;
            }
           },100);
        },
        toggle1(studentLevel){
           if(this.studentLevel1.indexOf(studentLevel)==-1){
              this.studentLevel1.push(studentLevel);
           }else{
              let index=this.studentLevel1.indexOf(studentLevel);
              this.studentLevel1.splice(index,1);
           }
        },
        toggle2(studentLevel){
           if(this.studentLevel2.indexOf(studentLevel)==-1){
              this.studentLevel2.push(studentLevel);
           }else{
              let index=this.studentLevel2.indexOf(studentLevel);
              this.studentLevel2.splice(index,1);
           }
        },
        showTip(msg){
            let _this=this;
            _this.tip.msg=msg;
            _this.tip.status=true;
            setTimeout(function(){_this.tip.status=false;},1000);
        },
        commit(){
            let _this=this;
            if(!((_this.subject1&&_this.studentLevel1.length>0)||(_this.subject2&&_this.studentLevel2.length>0))){
                _this.tip.msg="请至少选择一个教学课程";
                _this.tip.status=true;
                setTimeout(function(){_this.tip.status=false;},1000);
                return false;
            }
            if((_this.subject1)&&(_this.studentLevel1.length==0)){
                _this.tip.msg="请选择科目一的可授课年级";
                _this.tip.status=true;
                setTimeout(function(){_this.tip.status=false;},2000);
                return false;
            }
            if((_this.subject2)&&(_this.studentLevel2.length==0)){
                _this.tip.msg="请选择科目二的可授课年级";
                _this.tip.status=true;
                setTimeout(function(){_this.tip.status=false;},2000);
                return false;
            }
            if(_this.subject1==_this.subject2){
                _this.tip.msg="请不要重复选择同样的课程";
                _this.tip.status=true;
                setTimeout(function(){_this.tip.status=false;},2000);
                return false;
            }
            _this.loading.msg="提交中...";
            _this.loading.status=true;
            _this.$http.post(_this.url,
                            {
                              id:_this.userId,
                              subject1:_this.subject1,
                              studentLevel1:_this.studentLevel1.join('|'),
                              subject2:_this.subject2,
                              studentLevel2:_this.studentLevel2.join('|')
                            })
                .then(
                  (response)=>{
                     _this.loading.status=false;
                     _this.tip.msg="保存成功";
                     _this.tip.status=true;
                     setTimeout(function(){
                        _this.tip.status=false;
                        _this.$router.push({path: '/index'});
                     },1000);
                  },
                  (error)=>{
                    _this.loading.status=false;
                    console.log(error);
                  }
                );
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.teacherSubject
{
    .header_group
    {
        padding:0.5rem 0;
        text-align:center;
        h6
        {
          color:#078def;
          font-size:0.5rem;
          margin-bottom:0.3rem;
        }
        p 
        {
          color:#999;
        }
    }
    .title
    {
      line-height:0.8rem;
      height:0.8rem;
      padding:0 0.3rem;
      font-size:0.28rem;
    }
    .grade
    {
      overflow:hidden;
      background:#fff;
      li
      {
        width:33.33%;
        float:left;
        line-height:0.7rem;
        height:0.7rem;;
        box-sizing:border-box;
        padding-left:0.5rem;
        &::before
        {
          content:'';
          display:inline-block;
          width:0.4rem;
          height:0.4rem;
          border-radius:50%;
          border:1px solid #ccc;
          vertical-align:middle;
          box-sizing:border-box;
        }
        &.active
        {
          &::before
          {
            content:'√';
            display:inline-block;
            width:0.4rem;
            height:0.4rem;
            line-height:0.4rem;
            border-radius:50%;
            vertical-align:middle;
            box-sizing:border-box;
            border: 1px solid #078def;
            text-align: center;
            background: #078def;
            color:#fff;
          }
        }
      }
    }
    .info1
    {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.8rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child
        {
          border-bottom:1px solid #eee;
        }
        &::after 
        {
           content:'';
           display:inline-block;
           width:0.15rem;
           height:0.15rem;
           border-right:1px solid #999;
           border-top:1px solid #999;
           position:absolute;
           right:0.3rem;
           top:0.36rem;
           -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
               -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                   transform: rotate(45deg);
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
      }
    }
    .prop
    {
      width:100%;
      height:100%;
      position:fixed;
      background:rgba(0,0,0,0.5);
      left:0;
      top:0;
      .tab
      {
        padding:0.3rem 0;
        width:6rem;
        background:#fff;
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-3.6rem;
        margin-left:-3rem;
        li
        {
           line-height:0.8rem;
           height:0.8rem;
           padding:0 0.4rem;
           position:relative;
           &::before
           {
             content:'';
             width:0.3rem;
             height:0.3rem;
             border:1px solid #ccc;
             border-radius:50%;
             display:inline-block;
             vertical-align:middle;
           }
           &.active
           {
             &::before
             {
               content:'√';
               width:0.3rem;
               height:0.3rem;
               line-height:0.34rem;
               text-align:center;
               font-size:0.2rem;
               border:1px solid #078def;
               background:#078def;
               color:#fff;
               border-radius:50%;
               display:inline-block;
               vertical-align:middle;
             }
           }
           label
           {
             margin-left:0.1rem;
           }
           input
           {
             width:100%;
             height:100%;
             position:absolute;
             left:0;
             top:0;
             border:none;
             z-index:1001;
           }
        }
      }
    }
    .commit
    {
        margin:0.24rem;
        line-height:0.8rem;
        height:0.8rem;
        border-radius:0.1rem;
        border:1px solid #078def;
        text-align:center;
        background:#078def;
        color:#fff;
        font-size:0.32rem;
    }
}
</style>
